<template>
  <div class="tinymce-view">
    <introduction>
      公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a data-v-2fc2cc69="" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor" class="link-type">文档介绍</a>
    </introduction>
    <tinymce class="tinymce" v-model="tinymceContent"></tinymce>

    <div class="content" v-html="tinymceContent">
    </div>
  </div>
</template>

<script>
  import tinymce from '@/components/Tinymce'
  import introduction from '@/components/Introduction'

  export default {
    name: "tinymce-view",
    components:{ tinymce, introduction },
    data:function () {
      return {
        tinymceContent: 'This is default content!'
      }
    },
  }
</script>

<style lang="scss" scoped>

  .tinymce-view{
    .tinymce{
      margin-top: 20px;
    }

    .content{
      margin-top: 20px;

      input{
        width: 100%;
      }
    }
  }
</style>
